<template>
  <div>
    <el-color-picker v-model="color" />
    <el-button style="width: 100px" @click="changeLineStyle"
      >虚线 实现切换</el-button
    >
    <input
      id="expand-size"
      type="range"
      v-model="cropExpandSize"
      min="0"
      :max="100"
    />
  </div>
  <div style="margin-left: 50px">
    <RecycleScroller
      class="scroller"
      :items="items"
      ref="scroller"
      :item-size="230"
      gridItems="5"
      v-slot="{ item }"
      @update="change"
    >
      <ImageWithMarks
        :imageUrl="item.url"
        :marks="item.marks"
        :displaySize="item.displaySize"
        :borderColor="color"
        :cropExpandSize="cropExpandSize"
        :lineStyle="lineStyle"
      ></ImageWithMarks>
    </RecycleScroller>
  </div>
</template>

<script setup>
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";

import ImageWithMarks from "../canvas/ImageWithMarks.vue";
// items 是一个对象数组， item 传递给 ListItem 组件 是包含了对象数组的对象

import { ref } from "vue";

const store = useCounterStore();
const { color } = storeToRefs(store);

const lineStyle = ref("dashed");
const items = ref([]);

const cropExpandSize = ref(0);

const changeLineStyle = () => {
  lineStyle.value = lineStyle.value === "dashed" ? "solid" : "dashed";
};
for (let i = 0; i < 100000; i++) {
  items.value.push({
    id: i + 1,
    url: "https://photokit.com/features/images/image-text-after.webp",
    marks: [{ shape_type: "rect", rect: "100,100,500,500" }],

    borderColor: "yellow",
  });
}
const scroller = ref(null);

const change = (startIndex, endIndex) => {
  console.log(555);

  console.log(`Visible items from index ${startIndex} to ${endIndex}`);
};
</script>

<style scoped>
.scroller {
  height: 75vh;
  display: flex;
  flex-wrap: wrap;
  width: 60vw;
  background-color: #f5f5f5;
  padding: 10px;
}
</style>
